import React, { useState } from 'react';
import '../../style/playlist.css';

import p1 from '../../img/playlist/1.png';
import p2 from '../../img/playlist/2.png';
import p3 from '../../img/playlist/3.png';
import p4 from '../../img/playlist/4.png';

const songs = [
    { src: p1, playCount: "2149.9万", name: "这首歌的杀伤力，大概和初恋一样", creator: "你还欠我一个晚安" },
    { src: p2, playCount: "2.9亿", name: "很遥远吧，最后连一张合照都没有", creator: "贝多芬的猫" },
    { src: p3, playCount: "1.8亿", name: "重温粤语经典好歌50首", creator: "有梦不难" },
    { src: p4, playCount: "5069.0万", name: "K-pop制燥！假日氛围/氛围Slay", creator: "撸皮蛋辣椒" },
    // 可以继续添加更多歌单数据
];

// 单个歌单卡片组件
const PlaylistCard = ({ song }) => (
    <div className="playlist-card">
        <img src={song.src} alt={song.name} />
        <div className="play-logo">
            <i className="ri-play-fill"></i>
        </div>
        <div className="playlist-info">
            <span className="playlist-count">{song.playCount}</span>
            <p className="playlist-name">{song.name}</p>
            <p className="playlist-creator">{song.creator}</p>
        </div>
    </div>
);

// 歌单卡片容器
const PlaylistContainer = () => (
    <div className="playlist-frame">
        {songs.map((song, index) => (
            <PlaylistCard key={index} song={song} />
        ))}
    </div>
);

// 歌单分类组件
const PlaylistCategories = ({ selectedCategory, onCategoryClick }) => {
    const categories = ["全部", "流行", "说唱", "国风", "私藏", "电子", "摇滚", "轻音乐"];

    return (
        <div className="playlist-categories">
            {categories.map(category => (
                <div
                    key={category}
                    className={`category-item ${selectedCategory === category ? 'selected' : ''}`}
                    onClick={() => onCategoryClick(category)}
                >
                    {category}
                </div>
            ))}
        </div>
    );
};

// 主组件
const Playlist_Categories = () => {
    const [selectedCategory, setSelectedCategory] = useState("全部");

    const handleCategoryClick = (category) => {
        setSelectedCategory(category);
        // TODO: 根据选中的分类加载相应的数据
    };

    return (
        <div className="playlist-container">
            <PlaylistCategories selectedCategory={selectedCategory} onCategoryClick={handleCategoryClick} />
            <h2 className="playlist-title">精选歌单</h2>
            <PlaylistContainer />
        </div>
    );
};

export default Playlist_Categories;
